<template>
  <div class="coupon-container">
    <div class="image-container">
      <u-image
        class="top-image"
        :src="require('@/static/images/daydayCoupons.png')"
        mode="widthFix"
        @load="handleLoad"
        @error="handleError"
      />
      <div class="notification-box">
        <transition-group name="fade" tag="div">
          <div v-for="(msg, index) in [currentMessage]" :key="index" class="message">
            {{ msg }}
          </div>
        </transition-group>
      </div>
      
      <button @click.native="gotocoupons" class="my-coupons-button">我的优惠券</button>
    </div>

    <div class="card-container">
      <div class="card-title">{{ title }}</div>
      
      <div class="countdown">{{ formattedTime }}</div>
      
      <div class="tabs-container">
        <div class="tabs">
          <span 
            class="tab" 
            :class="{ active: activeTab == 'tab1' }" 
            @click="changeTab('tab1')">7:00</span>
          <span 
            class="tab" 
            :class="{ active: activeTab == 'tab2' }" 
            @click="changeTab('tab2')">12:00</span>
          <span 
            class="tab" 
            :class="{ active: activeTab == 'tab3' }" 
            @click.native="changeTab('tab3')">13:00</span>
          <span 
            class="tab" 
            :class="{ active: activeTab == 'tab4' }" 
            @click="changeTab('tab4')">14:00</span>
        </div>

        <div class="tab-content">
          <div v-for="tab in tabList" :key="tab.id" v-if="activeTab === tab.id">
            <div v-for="coupon in tab.coupons" :key="coupon.id" class="coupon-card">
              <h3>{{ coupon.title }}</h3>
              <p>{{ coupon.description }}</p>
              <button 
                :disabled="isCouponExpired"
                @click="claimCoupon(coupon.id)">
                {{ isCouponExpired ? '已失效' : '领取优惠券' }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
	<!-- 底部导航栏 -->
	<u-tabbar v-model="current" :list="tabBarList" :selected-color="activeColor" :border-style="inactiveColor"
	  :border-top="borderTop" />
  </div>
</template>

<script>
export default {
  data() {
    return {
		//导航信息：-----------------------------------
		title: '优惠卷', // 导航栏的标题，这会显示在页面的顶部或作为当前视图的标题
		tabBarList: this.$store.state.dynamicTabbar, // 导航栏的列表项，来源于Vuex状态管理中的dynamicTabbar
		current: 1, // 当前激活的导航项的索引，0表示第一个导航项
		borderTop: true, // 控制是否有顶部边框，true表示有边框
		inactiveColor: 'black', // 未激活的TabBarItem的颜色
		activeColor: 'red' ,// 激活的TabBarItem的颜色
		//-----------------------------------
      messages: ['消息通知1', '消息通知2', '消息通知3'], 
      currentMessageIndex: 0, 
      intervalId: null, 
      activeTab: 'tab1', // 默认激活的标签页
      tabList: [
        { id: 'tab1', title: '7:00', coupons: [
          { id: 'coupon1', title: '优惠券1', description: '这是优惠券1的描述' },
          { id: 'coupon2', title: '优惠券2', description: '这是优惠券2的描述' }
        ] },
        { id: 'tab2', title: '12:00', coupons: [
          { id: 'coupon3', title: '优惠券3', description: '这是优惠券3的描述' },
          { id: 'coupon4', title: '优惠券4', description: '这是优惠券4的描述' }
        ] },
        { id: 'tab3', title: '13:00', coupons: [
          { id: 'coupon5', title: '优惠券5', description: '这是优惠券5的描述' },
          { id: 'coupon6', title: '优惠券6', description: '这是优惠券6的描述' }
        ] },
        { id: 'tab4', title: '14:00', coupons: [
          { id: 'coupon7', title: '优惠券7', description: '这是优惠券7的描述' },
          { id: 'coupon8', title: '优惠券8', description: '这是优惠券8的描述' }
        ] }
      ],
      title: '现时秒杀', 
      countdownTime: 40, // 倒计时初始时间，单位秒
      isCouponExpired: false, // 判断优惠券是否过期
    };
  },
  computed: {
    currentMessage() {
      return this.messages[this.currentMessageIndex];
    },
    formattedTime() {
      const minutes = Math.floor(this.countdownTime / 60);
      const seconds = this.countdownTime % 60;
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    }
  },
  mounted() {
    this.intervalId = setInterval(this.nextMessage, 2000);
    this.startCountdown();
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
    clearInterval(this.countdownId);
  },
  methods: {
    nextMessage() {
      this.currentMessageIndex = (this.currentMessageIndex + 1) % this.messages.length;
    },
    handleLoad() {
      console.log('图片加载成功');
    },
    handleError() {
      console.log('图片加载失败');
    },
    
    changeTab(tabId) {
      this.activeTab = tabId;
    },
    claimCoupon(couponId) {
      if (!this.isCouponExpired) {
        console.log('领取优惠券，ID:', couponId);
        // 实际领取优惠券的逻辑
      }
    },
    gotocoupons() {
      uni.navigateTo({
        url: './mycoupons'
      });
    },
    startCountdown() {
      this.countdownId = setInterval(() => {
        if (this.countdownTime > 0) {
          this.countdownTime--;
        } else {
          clearInterval(this.countdownId); 
          this.isCouponExpired = true; // 倒计时结束，设置为已失效
        }
      }, 1000);
    },
  }
}
</script>

<style scoped>
.coupon-container {
  position: relative;
  padding: 10px;
}

.image-container {
  position: relative;
}

.top-image {
  width: 100%;
  height: auto;
}

.notification-box {
  position: absolute;
  left: 10px;
  bottom: 10px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px;
  border-radius: 5px;
  overflow: hidden;
}

.message {
  white-space: nowrap;
}

.fade-enter-active, .fade-leave-active {
  transition: all 0.5s ease;
}

.fade-enter, .fade-leave-to {
  opacity: 0;
  transform: translateY(20px);
}

.card-container {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
}

.card-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.countdown {
  font-size: 16px;
  font-weight: bold;
  color: #ff4d4f;
  position: absolute;
  top: 10px;
  right: 10px;
}

.tabs-container {
  margin-top: 30px;
}

.tabs {
  display: flex;
  list-style-type: none;
  padding: 0;
}

.tabs .tab {
  margin-right: 15px;
  padding: 10px 15px;
  cursor: pointer;
  background-color: #f0f0f0;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.tabs .tab:hover {
  background-color: #d3d3d3;
}

.tabs .tab.active {
  background-color: #ff4d4f;
  color: white;
}

.tab-content {
  margin-top: 10px;
  padding: 10px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.coupon-card {
  background-color: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 15px;
}

.coupon-card h3 {
  margin: 0;
  font-size: 18px;
  color: #333;
}

.coupon-card p {
  margin: 10px 0;
  color: #666;
}

.coupon-card button {
  background-color: #ff4d4f;
  color: white;
  border: none;
  padding: 10px 15px;
  border-radius: 5px;
  cursor: pointer;
}

.coupon-card button:hover {
  background-color: #e04343;
}


.my-coupons-button {
  position: absolute;
  right: 10px;
  top: 10px;
  background-color: #ff4d4f;
  color: white;
  padding: 10px 15px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-coupons-button:hover {
  background-color: #e04343;
}
</style>

